<template>
	<view class="xilu">
		
		<hx-navbar :config="config">
			<block slot="left">
				<picker mode="selector" :value="c_index" :range="city_list" range-key="name" @change="changeCity">
					<view class="left flex-box pl25">
						<image src="@/static/images/xilu_icon_address.png" mode="aspectFill" class="xilu_icon_address">
						</image>
						<view class="fs28 fw500 coldark coldeepblue plr10">{{city_list[c_index]['name'] || (cityInfo.name || '未知')}}
						</view>
						<image src="@/static/images/xilu_icon_arrowdown.png" mode="aspectFill" class="xilu_icon_down">
						</image>
					</view>
				</picker>

			</block>
			<block slot="center">
				<text class="fs36 fw700 col0 colblue">星路线</text>
			</block>
		</hx-navbar>
		<view class="page-foot">
			<Footer :identity="1" :footState="0"></Footer>
		</view>
		
		<movable-area class="movableArea">
			<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange">
				<button class="xilu_route_link" open-type="contact" hover-class="none">
					<image src="../../static/index/kefu.png" mode="widthFix" class="iconImage"></image>
				</button>
			</movable-view>
		</movable-area>
		
		
		
	
		<view class="container">
			<view class="xilu_head_search flex-box" @click="toSearch">
				<!-- <view class="xilu_search_sq"></view> -->
				<image src="@/static/images/xilu_icon_search.png" mode="widthFix" class="ico30 "></image>
				<input type="text" class="flex-grow-1 fs26 colf plr20" placeholder="请输入" placeholder-class="col9"
					confirm-type="search">
				<view class="sbtn" >搜索</view>
				<!-- <image src="@/static/images/xilu_icon_search.png" mode="widthFix" class="ico28"></image> -->
			</view>
			<!-- 轮播区域 -->
			<view class="pr">
				<swiper class="xilu_home_swiper pr z2" :indicator-dots="true" :circular="true" :autoplay="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(vo,key) in bannerList">
						<image :src="vo.xilufitness_urls.thumb_image" @click.stop="banner_redirect(vo.redirect_url)"
							mode="aspectFill" class="banner"></image>
					</swiper-item>
				</swiper>
				<view class="xilu_swiper_bottom flex-box flex-center">
					<image src="@/static/images/xilu_icon1.png" mode="aspectFill" class="ico24 mid"></image>
					<view class="fs24 fw500 colf pl5 pr40 textshadow">按次付费</view>
					<image src="@/static/images/xilu_icon2.png" mode="aspectFill" class="ico24 mid"></image>
					<view class="fs24 fw500 colf pl5 pr40 textshadow">优质课程</view>
					<image src="@/static/images/xilu_icon3.png" mode="aspectFill" class="ico24 mid"></image>
					<view class="fs24 fw500 colf pl5 pr40 textshadow">专业教练</view>
					<image src="@/static/images/xilu_icon4.png" mode="aspectFill" class="ico24 mid"></image>
					<view class="fs24 fw500 colf pl5 textshadow">高效快乐</view>
				</view>
			</view>
			<!-- 金刚区 -->
			
			<!-- 	
			<view class="xilu_router_link_nav flex-box flex-center">
				
			</view> -->
			
			
			<!-- 分类列表 -->
			<div class="box_center" >
				<view class="xilu_router_link_nav">
					<!--<view class="xilu_route_link" @tap="moreCourse(1)">
						<image src="@/static/images/xilu_icon5.png" mode="widthFix" class="xilu_route_img"></image>
						<view class="fs28 lh28 colf">团课</view>
					</view>
					<view class="xilu_route_link" @tap="moreCourse(2)">
						<image src="@/static/images/xilu_icon6.png" mode="widthFix" class="xilu_route_img"></image>
						<view class="fs28 lh28 colf">私教</view>
					</view>
					<view class="xilu_route_link" @tap="moreCourse(3)">
						<image src="@/static/images/xilu_icon7.png" mode="widthFix" class="xilu_route_img"></image>
						<view class="fs28 lh28 colf">活动</view>
					</view>
					<view class="xilu_route_link" @tap="toMine()">
						<image src="@/static/images/xilu_icon8.png" mode="widthFix" class="xilu_route_img"></image>
						<view class="fs28 lh28 colf">会员卡</view>
					</view>-->
				
					
					<view class="xilu_route_link" v-for="(item, index) in courseCateList"  @tap="moreCourse(1,item.pid, item.id, item.cate_name )">
						<image :src="item.xilufitness_urls.image" mode="widthFix" class="xilu_route_img"></image>
						<view class="fs28 lh28 col3"> {{ item.cate_name }}</view>
					</view>
					<view class="xilu_route_link" @tap="goShop">
						<image src="/static/images/p_shop.png" mode="widthFix" class="xilu_route_img"></image>
						<view class="fs28 lh28 col3"> 积分商城</view>
					</view>
					<button class="xilu_route_link" open-type="contact" hover-class="none">
						<image src="@/static/images/server.png" mode="widthFix" class="xilu_route_img"></image>
						<view class="fs28 lh28 col3">客服</view>
					</button>
				</view>
			</div>
			<!-- 列表1 -->
			<view class="flex-box flex-between plr25">
				<view class="fs36 fw700 col3 lh50 flex-box"><image src="@/static/images/company.png" class="ico36"></image><text class="pl15">优选机构</text></view>
				<view @click="go_shop_list()" class="xilu_btn_more flex-box flex-end">更多<image src="@/static/images/xilu_arrow_right.png" mode="widthFix"></image></view>
			</view>
			<scroll-view class="xilu_scroll" scroll-x="true">
				<template v-if="shopList.length > 0">
					<view class="xilu_scroll_item " v-for="(vo,keys) in shopList" @tap="shopDetail(vo.id)">
						<view class="fl pr">
							<image :src="vo.xilufitness_urls.shop_image" mode="aspectFill" class="xilu_scroll_cover">
							</image>
							<view class="starbox">
								<view v-if="vo.star==5" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star>4 && vo.star<5" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star>3 && vo.star<4" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star>2 && vo.star<3" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star>1 && vo.star<2" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star==4" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star==3" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star==2" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
								</view>
								<view v-if="vo.star==1" class="flex-box">
									<image src="@/static/images/star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
									<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
								</view>
								<text class="fs12">{{ vo.star}}</text>
							</view>
						</view>
						
						<view class="shopinfo fl">
							<view class="text-over fs32 fw700">{{vo.shop_name || ''}}</view>
							<view class="level" v-if="vo.rank=='3皇冠'">
								<image src="@/static/images/huangguan.png" class="ico28 mr5"></image>
								<image src="@/static/images/huangguan.png" class="ico28 mr5"></image>
								<image src="@/static/images/huangguan.png" class="ico28"></image>
							</view>
							<view class="level" v-if="vo.rank=='2皇冠'">
								<image src="@/static/images/huangguan.png" class="ico28 mr5"></image>
								<image src="@/static/images/huangguan.png" class="ico28 mr5"></image>
								
							</view>
							<view class="level" v-if="vo.rank=='1皇冠'">
								<image src="@/static/images/huangguan.png" class="ico28 mr5"></image>
							</view>
							<view class="level" v-if="vo.rank=='3钻'">
								<image src="@/static/images/diamond.png" class="ico28 mr5"></image>
								<image src="@/static/images/diamond.png" class="ico28 mr5"></image>
								<image src="@/static/images/diamond.png" class="ico28 mr5"></image>
							</view>
							<view class="level" v-if="vo.rank=='2钻'">
								<image src="@/static/images/diamond.png" class="ico28 mr5"></image>
								<image src="@/static/images/diamond.png" class="ico28 mr5"></image>
								
							</view>
							<view class="level" v-if="vo.rank=='1钻'">
								<image src="@/static/images/diamond.png" class="ico28 mr5"></image>
							</view>
							
							<view class="pos text-over fs24 col-gray">
								<image src="@/static/images/building.png" class="ico28"></image>
								<text class="ml10">{{vo.short_address || ''}}</text>
							</view>
							<view class="pospoint col-gray fs24">
								<image src="@/static/images/position.png" class="posimg" mode="widthFix"></image>
								<distance-format :distance="vo.distance" class="ml10"></distance-format>
							</view>
						</view>
						<!--<view class="mt20 plr20 fw500 colf fs30 lh42 flex-box flex-between">
							<!-- <view>{{vo.shop_name || ''}} {{ vo.star}}级 </view> 
							<view style="display: flex;align-items: center;">
								<view>{{vo.shop_name || ''}}</view>
								<view style="margin: auto 15rpx;font-size: 24rpx;background-color: rgba(255, 207, 0, 1);width: 100rpx;text-align: center;height: 34rpx;border-radius: 34rpx;line-height: 30rpx;">{{ vo.rank}} </view>
							</view>
							<view class="col2 ml10">{{ vo.star}}分</view>
						</view>
						<view class="mt10 plr20 flex-box flex-between">
							<view class="xilu_scroll_address m-ellipsis">{{vo.address || ''}}</view>
							<view class="fs24 col9 lh32">
								<distance-format :distance="vo.distance"></distance-format>
							</view>
						</view>-->
					</view>
				</template>
				<template v-else>
					<empty-data :tips="'暂无门店'" :lineHeight="100">

					</empty-data>
				</template>

			</scroll-view>
			<view class="flex-box flex-between mt70 plr25">
				<view class="fs36 fw700 col3 lh50 flex-box"><image src="@/static/images/course.png" class="ico36"></image><text class="pl15">推荐课程</text></view>
				<view @tap="moreCourse(1)" class="xilu_btn_more flex-box flex-end">更多<image src="@/static/images/xilu_arrow_right.png" mode="widthFix"></image></view>
			</view>
			<view class="plr25 pt10">
				<template v-if="courseList.list.length > 0">
					<course-list :courseList="courseList"></course-list>
				</template>

				<template v-else>
					<empty-data :tips="'暂无课程'" :lineHeight="100"></empty-data>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				config: {
					back: false,
					leftSlot: true,
					centerSlot: true,
					backgroundColor: [1, '#E8EEFE'],
				},
				bannerList: [], //banner数据
				shopList: [], //门店数据
				courseList: {
					list: [],
					lng: '',
					lat: ''
				}, //课程数据
				courseCateList: [], // 分类
				cityInfo: null,
				city_list: [],
				c_index: '',
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
			}
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			}
		},
		
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 80;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 40;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		onLoad() {
			this.getCityList();
			this.getHomeLocation();
		},
		onShareAppMessage() {
			
		},
		methods: {
			goShop() {
				this.$api.navigate("../points_mall/points_mall")
			},
			toSearch() {
					uni.navigateTo({
						url:'/pages/search/search'
					})
			},
			//选择城市
			changeCity(e) {
				let city_list = this.city_list;
				let c_index = e.detail.value || '';
				this.c_index = c_index;
				if (city_list[c_index]) {
					app.globalData.cityInfo = city_list[c_index];
					this.getHomeData();
				}
			},
			
			/**
			 * 开启定位
			 */
			getHomeLocation() {
				let _this = this;
				this.$api.getLocation(function(res) {
					console.log(res);
					
					if (res.latitude && res.longitude) {
						app.globalData.lat = res.latitude;
						app.globalData.lng = res.longitude;
					} else {
						app.globalData.lat = '36.70864';
						app.globalData.lng = '119.13279';
						// app.globalData.lat = '31.231859';
						// app.globalData.lng = '121.486561';
					}
					_this.getHomeData();
					
				});
			},
			/**
			 * 获取城市列表
			 */
			getCityList() {
				let _this = this;
				if (app.globalData.cityList.length > 0) {
					this.city_list = app.globalData.cityList;
					return false;
				} else {
					this.$http({
						url: '/addons/xilufitness/home/getCityList',
						data: {
							pid:0
						},
						method: 'get'
					}).then(res => {
						if (res.code == 1) {
							_this.city_list = res.data.list || [];
							app.globalData.cityList = res.data.list || [];
						}
					}).catch(error => {
						console.log('cityListError', error);
					})
				}

			},
			/**
			 * 获取首页数据
			 */
			getHomeData() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/home/index',
					data: {
						lat: app.globalData.lat,
						lng: app.globalData.lng,
						city_id: app.globalData.cityInfo ? (app.globalData.cityInfo.id || 0) : 0,
						province_id: app.globalData.cityInfo ? (app.globalData.cityInfo.province_id || 0) : 0
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						
						_this.bannerList = res.data.bannerList;
						_this.courseCateList = res.data.courseCateList;
						console.log(res.data.courseList);
						_this.shopList = res.data.shopList;
						_this.courseList.list = res.data.courseList;
						_this.courseList.lat =  app.globalData.lat
						_this.courseList.lng =  app.globalData.lng
						console.log(_this.courseList);
						_this.cityInfo = app.globalData.cityInfo || res.data.cityInfo;
						if (!app.globalData.cityInfo) {
							app.globalData.cityInfo = res.data.cityInfo;
						}
					}
				}).catch(error => {
					console.log('home_error', error);
				})
			},
			//更多门店
			go_shop_list() {
				this.$api.navigate('../stores_list/stores_list');
			},
			//门店详情
			shopDetail(id) {
				this.$api.navigate('../stores_info/stores_info?id=' + id)
			},
			//更多课程
			moreCourse(status,pid, id, cate_name) {
				this.$api.navigate('../course_classification/course_classification?status=' + status + '&name=' + cate_name + '&id=' + id + '&pid=' + pid)
			},
			//课程详情
			courseDetail(id) {
				this.$api.navigate('../group_lessons_info/group_lessons_info?id=' + id)
			},
			//会员卡
			toMine() {
				this.$api.navigate('../mine/mine')
			},
			//banner点击跳转
			banner_redirect(url) {
				if (url) {
					this.$api.navigate(url);
				}
			},
			// 这个是拖动客服按钮
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			// 这个点击客服按钮
			onTouchend(e) {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					console.log(this.x, this.y)
				}, 100)
				uni.navigateTo({
					url: '/pagesA/web/web?url=' + encodeURIComponent(
						"https://10730921.saas.53kf.com/code/xcx/2b4c15f5b8e0c204d16c33791d3580925/1")
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box_center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.search {
		height:200rpx;
	}
	.sbtn{
		width:120rpx;
		height:60rpx;
		text-align: center;
		background-color: #275BFC;
		color:#fff;
		border-radius: 30rpx;
		line-height: 60rpx;
		font-size:32rpx;
	}
	.shopinfo{
		width:270rpx;
		padding:20rpx 10rpx 20rpx 20rpx;
		box-sizing: border-box;
		line-height: 44rpx;
	}
	.text-over{
		overflow: hidden; /* 隐藏溢出的内容 */
		text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
		white-space: nowrap; /* 防止文本换行 */
	}
	.posimg{
		width:20rpx;
	}
	.starbox{
		width:130rpx;
		height:36rpx;
		background-color: #FFEB3B;
		position: absolute;
		left:0;
		top:0;
		border-radius: 20rpx 0 20rpx 0;
		color:#FF6105;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xilu {
		&_head_search {
			width: 710rpx;
			height: 84rpx;
			background: #fff;
			border-radius: 42rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin:20rpx;
		}
		
		&_search_sq {
			width: 1px;
			height: 24rpx;
			background: #666666;
			margin-left: 20rpx;
			margin-right: 10rpx;
		}
		&_icon_address {
			width: 26rpx;
			height: 28rpx;
		}

		&_icon_down {
			width: 17rpx;
			height: 9rpx;
		}

		&_home_swiper {
			width: 712rpx;
			height: 314rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			overflow: hidden;
			.swiper-items{
				width:100%;
				height:100%;
				border-radius: 20rpx;
				overflow: hidden;
			}
			.banner {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				overflow: hidden;
			}
		}

		&_swiper_bottom {
			position: absolute;
			z-index: 3;
			bottom: 30rpx;
			left: 0;
			right: 0;
		}

		&_router_link_nav {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			display:flex;
			flex: 4;
			flex-wrap: wrap;
			justify-content: space-between;
			padding:0 20rpx;
		}

		&_route_img {
			width: 107rpx;
			margin-bottom: 5rpx;
		}

		&_route_link {
			width: 140rpx;
			text-align: center;
			margin:20rpx 0;

		}

		&_route_link+&_route_link {
			
		}

		&_btn_more {
			font-size: 32rpx;
			font-weight: 400;
			color: #000000;
			width: 146rpx;
			height: 55rpx;
			line-height: calc(55rpx - 2px);
			text-align: center;
			border-radius: 28rpx;
			// border: 1px solid #979797;
			image{
				width: 14rpx;
				margin-left:10rpx;
			}
		}

		&_scroll {
			width: 100%;
			white-space: nowrap;
			height: 210rpx;
			margin-top: 32rpx;
		}

		&_scroll_cover {
			width: 240rpx;
			height: 210rpx;
			display: block;
			border-radius: 20rpx 0 0 20rpx;
		}

		&_scroll_address {
			width: 383rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;
		}

		&_scroll_item {
			width: 510rpx;
			height: 210rpx;
			background: #fff;
			border-radius: 20rpx;
			display: inline-block;
			vertical-align: top;
			margin-right: 20rpx;
			
		}

		&_scroll_item:first-child {
			margin-left: 25rpx;
		}

		&_scroll::-webkit-scrollbar {
			display: none;
		}

		&_list_item:nth-of-type(2n) {
			margin-right: 0;
		}

		&_list_item {
			width: 340rpx;
			height: 545rpx;
			background: #292B2C;
			border-radius: 20rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;

			&_cover {
				width: 100%;
				height: 340rpx;
				display: block;
			}
		}
	}
	.textshadow{
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	}
	
	/* 客服系统样式 */
	
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
	}
	
	.movableView {
		pointer-events: auto; //可以点击
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		border-radius: 100%;
	}
	
	.iconImage {
		display: block;
		width: 120rpx;
		height: 120rpx;
		// animation: iconImage 5s linear infinite;
	}
	
	@keyframes iconImage {
		0% {
			-webkit-transform: rotate(0deg);
		}
	
		25% {
			-webkit-transform: rotate(90deg);
		}
	
		50% {
			-webkit-transform: rotate(180deg);
		}
	
		75% {
			-webkit-transform: rotate(270deg);
		}
	
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	// 客服
	.contact {
		width: 50px;
		height: 50px;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: 100%;
		opacity: 0;
	}
</style>